var data = [
  { time: "2022-01-01 00:01:00", temperature: 37.0 },
  { time: "2022-01-01 00:02:00", temperature: 37.0 },
  { time: "2022-01-01 00:03:00", temperature: 37.0 },
  { time: "2022-01-01 00:04:00", temperature: 37.0 },
  { time: "2022-01-01 00:05:00", temperature: 37.0 },
  { time: "2022-01-01 00:06:00", temperature: 37.0 },
  { time: "2022-01-01 00:07:00", temperature: 37.0 },
  { time: "2022-01-01 00:08:00", temperature: 37.0 },
  { time: "2022-01-01 00:09:00", temperature: 37.0 },
  { time: "2022-01-01 00:10:00", temperature: 37.0 }
];

function getData() {
  //卡片部分获取数据
  var newdata=document.getElementById('temperature');
  newdata.textContent=data[9].temperature.toString();
  newdata.textContent+="℃";
  fetch("getdata/") // 发起GET请求到服务器
  .then(response => response.json()) // 将响应转换为JSON格式
  .then(response => {
    for (let i = 0; i < data.length-1; i++) {
      data[i] = data[i+1];
    }
    data[9] = response.data[0];

  })
  .catch(error => {
    console.error('Error:', error);
  });

  // var now = new Date();
  // var time = now.getFullYear() + '-' + (now.getMonth() + 1).toString().padStart(2, '0') + '-' + now.getDate().toString().padStart(2, '0') + ' ' + now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':00';
  // var temperature = Math.random() * (37.5 - 36.9) + 36.9; // 随机生成一个在36.9至37.5之间的温度值

  // // 添加新的数据
  // data.push({ time: time, temperature: temperature });
  
  // document.getElementById('temperature').innerText =  temperature.toFixed(1) + '℃';


  // 如果数据量超过10，删除最早的数据
  // if (data.length > 10) {
  //   data.shift();
  // }
    // 发送API请求
  

  // 将数据转换为echarts所需的格式
  var xAxisData = []; // x轴数据
  var temperatureData = []; // 温度数据

  var minTemperature = 1000; // 最小温度，初始化为一个较大的值
  var maxTemperature = -1000; // 最大温度，初始化为一个较小的值

  for (var i = 0; i < data.length; i++) {
    xAxisData.push(data[i].time.substr(11, 8)); // 只保留时间的小时和分钟部分
    temperatureData.push(data[i].temperature);
    
    // 更新最大温度和最小温度
    if (data[i].temperature < minTemperature) {
      minTemperature = data[i].temperature;
    }
    if (data[i].temperature > maxTemperature) {
      maxTemperature = data[i].temperature;
    }
  }

  var chartData = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      max:'36',
      min:'38'
    },
    series: [
      {
        name: '温度',
        type: 'line',
        data: temperatureData,
        smooth:'true'
      }
    ]
  };

  // 初始化echarts对象
  var myChart = echarts.init(document.getElementById('chart'));

  // 配置参数
  // 配置参数
var option = {
  title: {
    text: '温度变化曲线'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b}<br>温度：{c}℃' // 自定义提示框内容
  },
  xAxis: chartData.xAxis,
  yAxis: chartData.yAxis,
  series: chartData.series,
  visualMap: { // 显示最大值和最小值
    show: true,
    dimension: 0,
    seriesIndex: 0,
    min: minTemperature,
    max: maxTemperature,
    inRange: {
      color: ['#d94e5d','#eac736','#50a3ba'],
      symbol: 'none' // 取消球形结构
    },
    outOfRange: {
      colorAlpha: 0.5,
      symbol: 'none' // 取消球形结构
    },
    pieces: [ // 自定义分段和颜色
      {min: minTemperature, max: maxTemperature, color: '#d94e5d'}
    ]
  }
};

// 渲染图表
myChart.setOption(option);
}

// 在页面加载时立即更新图表
getData();

// 按时间间隔更新图表
setInterval(getData, 1000);
